<template>
  <div class="changePassword">
    <van-nav-bar title="账户变更" left-arrow @click-left="onClickLeft" />
    <div style="padding: 16px">
      <van-form @submit="onSubmit">
        <!-- <van-field v-model="username" readonly placeholder="请输入手机号" /> -->
        <van-field required v-model="phone" placeholder="请输入新手机号" />
        <van-field
          v-model="smsCaptchaResult"
          required
          clearable
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              slot="button"
              size="small"
              type="primary"
              v-if="!countDown"
              native-type="button"
              :disabled="captchaDisable"
              @click="sendVerifyCode"
              >发送验证码</van-button
            >
            <van-button
              :disabled="true"
              slot="button"
              size="small"
              type="primary"
              v-else
              >已发送{{ countDown }}s</van-button
            >
          </template>
        </van-field>
        <div style="margin: 16px 0">
          <van-button block type="info" native-type="submit">提交</van-button>
        </div>
        <div style="margin: 16px 0">
          <van-button
            block
            native-type="button"
            @click="() => $router.push('/personCenter')"
            >取消</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
  
<script>
export default {
  computed: {
    checkPhone() {
      // 1.1 当输入的手机号大于10位进行验证
      return /^1[3-9]\d{9}$/.test(this.phone);
    },
    userInfo() {
      const userInfo = localStorage.getItem("userInfo");
      if (userInfo) {
        return JSON.parse(userInfo);
      }
      return {};
    },
  },
  data() {
    return {
      isSuccess: false,
      smsUuid: "",
      codeUrl: "",
      uuid: "",
      smsCaptchaResult: "",
      username: localStorage.getItem("username"),
      phone: "",
      countDown: 0, // 倒计时
      password: "",
    };
  },
  methods: {
    onSuccess() {
      this.isSuccess = true;
    },
    // 4.获取手机验证码
    async sendVerifyCode() {
      if (this.phone.length < 1) {
        this.$toast({
          message: "请输入新手机号",
          duration: 800,
        });
        return;
      }
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        this.$toast({
          message: "请输入正确的手机号",
          duration: 800,
        });
        return;
      }
      const params = {
        phone: this.phone,
        uuid: this.uuid,
      };
      // 4.2 获取短信验证码
      this.$post("/customer/NewUserNameSms", params)
        .then((res) => {
          if (res && res.code * 1 === 200) {
            this.smsUuid = res.data;
            console.log(res, 'res')
            this.$toast({
              message: "短信发送成功",
              duration: 800,
            });
            this.countDown = 60;
            this.timeIntervalID = setInterval(() => {
              this.countDown--;
              // 4.1 如果减到0 则清除定时器
              if (this.countDown == 0) {
                clearInterval(this.timeIntervalID);
              }
            }, 1000);
          } else {
            //
          }
        })
        .catch(() => {
          //
        });
    },
    onClickLeft() {
      this.$router.push("/personCenter");
    },
    onSubmit() {
      if (this.smsCaptchaResult.length < 1) {
        this.$toast({
          message: "请输入短信验证码",
          duration: 800,
        });
        return;
      }
      if (this.phone.length < 1) {
        this.$toast({
          message: "请输入新手机号",
          duration: 800,
        });
        return;
      }
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        this.$toast({
          message: "请输入正确的手机号",
          duration: 800,
        });
        return;
      }
      // 6.1 请求后台登录接口
      const params = {
        uuid: this.smsUuid,
        code: this.smsCaptchaResult,
        phone: this.phone,
      };
      this.$post("/customer/updateUserName", params).then((res) => {
        if (res && res.code * 1 === 200) {
          this.$toast({
            message: "修改成功，请重新登录",
            duration: 2000,
          });
          localStorage.removeItem("token");
          localStorage.removeItem("username");
          this.$router.push("/login");
        }
      });
    },
  },
  mounted() {
    //
  },
};
</script>
<style scoped lang="less">
.changePassword {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
}
.login-code {
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
</style>
